<template>
<!-- vue2.0 template下必须有一个根元素 -->
  <h1>登陆页面</h1>
  <el-button @click="handleGetLogin">登陆</el-button>
</template>
<script>
import { reactive, toRefs, toRef, computed, onMounted, watch } from 'vue'
import { useRouter,useRoute } from 'vue-router'
import ajax from '@/utils/request.js'
// vue3.0 跟2.0语法基本保持一直，但是推出 composition-api: 函数式编程；
export default {
  // props: {},
  setup(props, context) {
    // 1. 定义响应式数据
    const data = reactive({
      phone: '888',
      password: '123456'
    })
    // 定义路由
    const router = useRouter()

    // 2. 请求数据接口
    const handleGetLogin = async () => {
      const response = await ajax.post('/api/login', {
        phone: data.phone,
        password: data.password
      })
      console.log('data:....:', response)
      localStorage.setItem('token', response.data.token)
      router.push({name: 'Home'})
    }


    return {
      handleGetLogin
    }
  }
}
</script>